<template>
  <div class="container">
    <div v-if="showWechat" class="wechatinfo" @click="hideWechat" style="width:100%;height:100%;position:fixed;">
        <div class="contact" @click.stop="">
            <div class="close" @click="hideWechat">×</div>
            <div class="ctitle">支付成功，添加客服微信进群</div>
            <img class="ccode" src="@/assets/images/joinchuizhiqun.jpg" alt="">
            <div class="chint" >扫码添加客服人员微信拉你入群</div>
            <div class="cbeizhu">请备注需要加入的行业</div>
        </div>
    </div>
    <div class="banner">
        <div class="imageview">
            <img src="@/assets/images/group-web.png" ></img>
        </div>
        <div class="payview">
            <div class="paytitle">加入社群</div>
            <!-- <div class="paynumber">已有10000人加入</div> -->
            <div class="hint">选择有效期：
                <div class="hintitem" v-for="(item, index) in itemList" @click="chooseItem(index)" :class="selecttime== index ? 'selecttime': ''">{{item.name}}</div>
            </div>
            <div class="hint">选择支付方式：</div>
            <div class="channel">
                <div class="platform">
                    <div @click="wechat" :class="selectchannel== 0 ? 'selectchannel': 'normalchannel'" class='wechat'>
                        <img class="label6" referrerpolicy="no-referrer" src="@/assets/images/weixin.png" />
                        <div>微信</div>
                    </div>
                    <div @click="alipay" :class="selectchannel== 1 ? 'selectchannel': 'normalchannel'" class='alipay'>
                        <img class="label6" referrerpolicy="no-referrer" src="@/assets/images/zhifubao.png" />
                        <div>支付宝</div>
                    </div>
                </div>
                <div class="code" :class="selectchannel== 0 ? 'wecode': 'alicode'">
                    <img v-if="selectchannel == 0 && wxUrl" :src="wxUrl" alt="">
                    <img v-if="selectchannel == 1 && aliUrl" :src="aliUrl" alt="">
                </div>
                <div class="price" v-if="itemList.length != 0">金额：<span style="color:#e46343; font-size:28px;">¥{{itemList[selecttime].price}}/{{itemList[selecttime].name}}</span> <span style="text-decoration:line-through;">¥{{itemList[selecttime].org_price}}</span> </div>
                <div class="fapiao" >支付遇到问题？点击右下角‘在线咨询’</div>
            </div>
        </div>
    </div>
  </div>
</template>


<script>
import { mapGetters } from "vuex";
import { getGroupPayList, makeOrder, isPayed } from "@/api/index.js";

export default {
  components: { },
  data() {
    return {
      selectchannel: 0,
      selecttime: 0,
      itemList: [],
      wxUrl: '',
      aliUrl: '',
      showWechat: false,
      orderId: '',
    };
  },
  created() {
    if(process.client) {
        getGroupPayList().then(res => {
            console.log(res)
            this.itemList = res.data
            this.refreshCode()
        })
        if (!this.sid) {
            this.$store.commit("SET_SHOW", true);
            return;
        } 
    }
  },
  destroyed(){
    if(this.loopId) {
        clearInterval(this.loopId);
    }
  },
  computed: {
    ...mapGetters(["openid", "uid", "sid"]),
  },
  methods: {
      hideWechat(){
        console.log('hideWechat')
        this.showWechat = false
      },
      wechat(){
        this.selectchannel = 0
        this.refreshCode()
      },
      alipay(){
        this.selectchannel = 1
        this.refreshCode()
      },
      chooseItem(index) {
        this.selecttime = index
        this.refreshCode()
      },
      refreshCode(){
        let index = this.selecttime
        let item = this.itemList[index]
        const env = require("/env");
        if (item.orderId) {
            this.wxUrl = env[process.env.NODE_ENV] + "/api/v2/wechatVerticalGroup/generateWxPayQrCodeByOffiaccount?orderCode="  + item.orderId + "&userId=" + this.uid;
            this.aliUrl = env[process.env.NODE_ENV] + "/api/v2/wechatVerticalGroup/generateFaceToFaceQrCode?orderCode=" + item.orderId + "&userId=" + this.uid;
            this.getPayStatus()
        } else {
            makeOrder({itemId: item.id}).then(res => {
                item.orderId = res.data.orderCode
                this.itemList[index] = item
                this.wxUrl = env[process.env.NODE_ENV] + "/api/v2/wechatVerticalGroup/generateWxPayQrCodeByOffiaccount?orderCode="  + item.orderId + "&userId=" + this.uid;
                this.aliUrl = env[process.env.NODE_ENV] + "/api/v2/wechatVerticalGroup/generateFaceToFaceQrCode?orderCode=" + item.orderId + "&userId=" + this.uid;
                this.getPayStatus()
            })
        }
        
        
      },
      getPayStatus() {
        
        let index = this.selecttime
        let item = this.itemList[index]

        var count = 0;
        this.needRefresh = false
        if(this.loopId) {
            clearInterval(this.loopId);
        }
        this.loopId = window.setInterval(() => {
            count++;
            if (count > 200) {
                clearInterval(this.loopId);
                this.needRefresh = true
                return
            }

            isPayed({orderCode: item.orderId})
            .then(res => {
                if (res.data == 1 ) {
                    item.orderId = ''
                    this.itemList[index] = item
                    this.showWechat = true
                    clearInterval(this.loopId);
                }
            })
            .catch(err => {

            })
        }, 1500);
    },
  }
};
</script>

<style lang="less" scoped>

.wechatinfo {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.4);
    margin-top: -54px;
    z-index: 99;
}

.contact {
    width: 800px;
    height: 500px;
    background-color: white;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 100;
}

.close {
    width: 100rpx;
    height: 100rpx;
    position: absolute;
    top: 10px;
    right: 20px;
    font-size: 28px;
    font-weight: 200;
    color: #999;
}

.ctitle {
    color: #333;
}

.ccode {
    margin-top: 20px;
    width: 200px;
    height: 200px;
}

.chint {
    color: #666;
    margin-top: 20px;
    font-size: 16px;
}

.cbeizhu {
    color: #999;
    margin-top: 20px;
    font-size: 12px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.title {
    font-size: 24px;
    color: #467DD0;
    margin: 20px;
}

.banner {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

.payview {
    width: 400px;
    height: 700px;
    display: flex;
    flex-direction: column;
    background-color: #fff;
    margin: 20px 40px;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 0 10px 0 rgb(39 66 107 / 10%);
}

.paytitle {
    color: #333;
    margin-top: 10px;
    margin-bottom: 20px;
    align-self: center;
    font-size: 20px;
}

.paynumber {
    color: #666;
    margin-top: 10px;
    align-self: center;
    font-size: 16px;
}

.hint {
    margin: 20px 0px;
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
}

.hintitem {
    width: 74px;
    height: 32px;
    background: #fff2ee;
    border-radius: 17px;
    line-height: 32px;
    font-size: 14px;
    color: #e46343;
    margin-right: 16px;
    cursor: pointer;
    text-align: center;
    margin-left: 10px;
}

.selecttime {
    background: #2676d3 linear-gradient(90deg,#ef9d62,#e36f3f);
    color: white;
}

.channel {
    width: 360px;
    height: 400px;
    border-radius: 4px;
    border: 1px solid #e4e4e4 !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    align-self: center;
}

.label6 {
    width: 28px;
    height: 28px;
    margin-left: 40px;
    margin-right: -16px;
}

.selectchannel {
    background-color: white;
    display: flex;
    align-items: center;
}

.normalchannel {
    background-color: #e4e4e4;
    border-left: 1px solid #e4e4e4!important;
    border-right: 1px solid #e4e4e4!important;
    color: #333;
    display: flex;
    align-items: center;
}

.wechat {
    color: #60c61c;
}

.alipay {
    color: #467DD0;
}

.code {
    margin-top: 40px;
    align-self: center;
    width: 180px;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.wecode {
    border: 2px solid #60c61c;
}

.alicode {
    border: 2px solid #467DD0;
}

.code img {
    width: 80%;
    height: 80%;
}

.platform {
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.platform div {
    width: 50%;
    text-align: center;
    height: 48px;
    line-height: 48px;
}

.price {
    margin-top: 20px;
    color: #999;
    font-size: 18px;
}

.fapiao {
    margin-top: 20px;
    font-size: 12px;
    color: #999;
}

.imageview {
    width: calc(90% - 480px);
    padding: 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
}

.imageview img {
    width: 100%;
}

</style>